<template>
    <div class="massages">
        <div class="massages-head">
            <div class="img">
            <router-link to="user"> 
                <img src="../../images/icon_bangding_01.png" alt="">
            </router-link>

            </div>
                <h2>{{msg}}</h2>            
        </div>
        <div class="nav">
            <div class="nav_left">通知</div>
            <div class="nav_right">聊天</div>
        </div>
        <div class="content">
            <img src="../../images/icon_xiaoxi_01.png" alt="">
               <div class="content_text">
                <h2 class="text_top">通知</h2>
                <h2 class="text_buttom">首次登陆成功，建立拿到手软！</h2>
            </div>
            <div class="time">
                2016年11月20日
            </div>
        </div>
        <router-link to="gambitmsg">
            <div class="content">
                 <img src="../../images/icon_xiaoxi_02.png" alt="">

                 <div class="content_text">
                    <h2 class="text_top">话题消息通知</h2>
                 </div>
            </div>
            </router-link>
            <router-link to="newfriendmsg">
            <div class="content">
                 <img src="../../images/icon_xiaoxi_03.png" alt="">

                 <div class="content_text">
                    <h2 class="text_top">新好友通知</h2>
                 </div>
            </div>
            </router-link>
    </div>

</template>
<script>
    export default{
        name:'Messages',
        data(){
            return{
                msg:'消息'
            }
        }       
    }
</script>
<style lang='less' scoped>
.massages{
    height:80/75rem;
}
.massages-head{
    width:750/75rem;
    height:80/75rem;
    background:#FF406F;
}
.massages-head h2{
    float:right;
    font-size:36/75rem;
    line-height:80/75rem;
    color:#fff;
    margin-right:340/75rem;
}
.massages-head .img{
    float:left;
    height:36/75rem;
}
.massages-head .img img{
    float:left;
    margin-left:20/75rem;    
    margin-top:26/75rem;
}
.nav{
    width:750/75rem;
    height:40/75rem;
    margin-top:27/75rem;    
    text-align:center;
    font-size:28/75rem;
    line-height:40/75rem;
}
.nav_left{
    width:374/75rem;
    height:40/75rem;
    border-right:2px solid #7F7F7F;
    float:left;
}
.nav_right{
    float:lef;t
    width:374/75rem;
    height:40/75rem;
}

.content{
    float:left;
    margin-top:20/75rem;
    width:750/75rem;
    height:154/75rem;
    background:#fff;
    box-shadow:0 0 20px #D3C3C3;
}
.content img{
    float:left;
    width:96/75rem;
    height:96/75rem;
    margin-top:29/75rem;
    margin-left:45/75rem;
    margin-right:20/75rem;
}
.content_text{
    float:left;
    height:154/75rem;
     margin-top:26/75rem;
}
.text_top{
    font-size:26/75rem;
    text-align:left;
    line-height:50/75rem;
    color:#8E8E8E;
}
.text_buttom{
    margin-top:20/75rem;
    font-size:22/75rem;
    color:#9D9D9D;
}
.time{
    float:right;
    font-size:20/75rem;
    margin-top:40/75rem;
    margin-right:76/75rem;
    color:#9D9D9D;
}
</style>